<template>
    <div>
        <div class="top">
        <div class="InfoClassify">
                <select @change="chaoption()" v-model="selected">
                    <option v-for="(item,index) in option" :value="item.id">{{item.value}}</option>

                </select>
            </div>
            <!-- <div class="left-icon" @click="showstyle">{{icon}}</div>-->
            <div class="Search">

              <van-search placeholder="搜索你感兴趣的分类"  v-model="value"   @search="onSearch" />

              </div><!-- v-model="value"-->


             <router-link to="/message" >
            <div><van-tabbar-item icon="records" dot></van-tabbar-item></div>
            </router-link>



            <router-link to="/release" ><div class="right-icon"><van-icon name="edit" /></div></router-link>
        </div>
        <div class="wrapper">
            <swiper :options="swiperOption" v-if="showSwiper">
                <swiper-slide v-for="item of Imglist" :key="item.imgid">
                <img class="swiper-img" :src="item.imgUrl" />
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
            </swiper>
        </div>
        <!-- 详情信息列表循环 -->
      <publish :type="type" :search="value"></publish>
    </div>
</template>

<script>
import { ImagePreview } from 'vant';
import AppReplay from '@/pages/Commons/Replay.vue'
import Publish from '@/pages/publish/publish.vue'
 import event from '@/pages/Commons/event.js'
export default {
    name: 'WorldIndex',
     components: {
        AppReplay,Publish
    },
    props: {
        list: Array
    },
    data () {
        return {
            // icon: '▶',
            ShowContent: '查看全文 ↓',
            ifShowContent: false,
            DianzanNum: 20,
            dataStatus: 'false',
            isRed: false,
             type:4,
            swiperOption: {
            pagination: '.swiper-pagination',
            loop: true,
            autoplay: 5000,

        },

        value:'',
       selected:"",
          option:[
            {
              id:1,
              value:'世界'
            },
            {
              id:2,
              value:'团队'
            },
            {
              id:3,
              value:'个人'
            },
            {
              id:4,
              value:'所有'
            },
          ],

        Imglist: [
            {imgid:'0',imgUrl:'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg'},
            {imgid:'1',imgUrl:'https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg'},
            {imgid:'2',imgUrl:'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg'},
        ],
        headerImg: "https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg"

        }
    },
    methods: {
      chaoption(){
        console.log(this.selected)
         event.$emit('type', this.selected)
        this.type=this.selected
      },
        // showstyle: function () {
        //     var iconCo = this.icon;
        //     this.icon = iconCo == '▶' ? '▼' : '▶';
        // },

        //点击显示放大图片

      onSearch(){

          console.log(this.value)
            event.$emit('value', this.value)
      },

        ShowbigImg: function () {
            ImagePreview({
                images: [
                   'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg',
                   'https://imgs.qunarzz.com/p/tts0/1808/69/3e35ac56ca1c0e02.jpg_750x440_147e1740.jpg',
                   'https://imgs.qunarzz.com/p/tts3/1808/bd/3935901d15a7c102.jpg_750x440_91925045.jpg',
                ],

            });
        },
        //是否展示‘查看全文’提示
        clickshowcontent: function  () {
            this.ShowContent = this.ShowContent == '查看全文 ↓' ? '收起全文 ↑' : '查看全文 ↓';
            if($('.showcontent').hasClass('showcontent')){
                $('.item-desc').removeClass('showcontent');
            }else{
                $('.item-desc').addClass('showcontent');
            }
        },

        //获取可容纳文本的高度，当超过一定的高度的时候给省略
        getItemdescHeight: function () {
            var HeightLong = $('.item-desc').height();
           if(HeightLong > 42){
                this.ifShowContent = true;               //显示‘查看全文’提示
                $('.item-desc').addClass('showcontent'); //添加超过部分隐藏的类
           }else{
                 this.ifShowContent = false;
                 $('.item-desc').removeClass('showcontent');
           }
        },

        //点赞
        ClickDianzan: function () {
            this.dataStatus = this.dataStatus == 'false' ? 'true' : 'false'; // 设置一个data 属性状态 false 、 true
            this.DianzanNum = this.dataStatus == 'true' ? this.DianzanNum + 1 : this.DianzanNum - 1 ;  // 根据 data 状态 来 增加或者减去点赞数量
            var isred = this.isRed; //根据 isred 的 状态 添加 class 高亮显示
            if(isred == false){
                this.isRed = true;
            }else{
                this.isRed = false;
            }
        }
    },
    mounted () {
        this.getItemdescHeight();
    },
    computed: {
        showSwiper () {
        return this.Imglist.length
        }
    },
     created(){
　　　　　　　　　　　　//如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
                    this.selected = this.option[0].id;
                },
}
</script>

       <style>


.top{background-color:#259E7B; padding:10px 0;display: flex;}
.InfoClassify select{
    background: #259E7B;
    border-color: #97D2C0;
    border-radius: 5px;
    padding: 5px 0px;
    margin: 0 10px;
    color: #fff;
    font-size: 14px;
}
.Search{width: 75%;}
.top .left-icon{padding: 0 8px; font-size: 20px;color: #ffffff; width: 45px;}
.right-icon{padding: 0 10px;color: #ffffff;font-size: 22px;}
.top .van-tabbar-item__icon{font-size: 22px; margin: 3px 10px; color:#fff}
.van-search{padding:0}
.van-search .van-cell{background: #97D2C0; border-radius: 0; color:#ffffff}
.swiper-container-horizontal{height:200px;}
.wrapper .img{width:100%;}

/*** 详情列表 **/
.Infomation {padding: 10px;}

.item-header, .item-remark, .item-img  {display:flex;}
.item-header .item-header-rightdot{ position: absolute; right: 15px; text-align: center;}
.item-header .item-header-logo{width:60px; height:60px; }
.item-header .item-header-logo img{width:60px; height:60px;border-radius: 50%;}
.item-header-namedata {padding: 8px 15px;}
.item-header-namedata .name{ font-size:13px; font-weight: bold;}
.item-header-namedata .data{margin-top: 5px; color: #B6B6B6;}
.nianji{font-size:14px;}
.dangban{
    margin-top: 5px;
    color: #fff;
    background: #259E7B;
    padding: 1px 15px;
    border-radius: 16px;
}

.item-desc{ margin: 10px 0;font-size: 14px;}
.showcontent{
    text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.info-item  {margin-top:60px;}
.info-item:first-child{margin-top:10px;}
.info-item .item-img .item-imglist{width:33%; margin: 0 2px;}
.info-item .item-img .item-imglist img{max-width:100%;}
.item-remark{float: right;padding:10px; font-size: 14px;color: #B6B6B6;}
.item-remark .van-icon{ margin-right:5px;}
.red{color:red;}

/** 评论回复区 */
.item-commentreply {border-radius: .5rem; padding: .5rem;  width: 100%; display: inline-block; background:#eeeeee}
</style>
